<template>
  <div>
  <div>
  <ul>
  <li v-for="(i,index) in userlist" :key="index">
  <van-button @click="changeuser(i)">{{i}}</van-button>
  
  </li>
  </ul>
  <ul>
  <li v-for="(i,index) in meslist" :key="index">{{i}}</li>
  </ul>
  </div>

  <div>
  <van-field v-model="mes"/><van-button @click="submit">发送</van-button>
  </div>

  

  </div>
</template>

<script>
export default {
    data(){
        return{
            show:false,
            mes:'',
            meslist:[],
            userlist:[],
            ws:'',
            user:''
        }
    },
    methods: {
        changeuser(id){
            this.user = id
        },
        conn(){
            this.ws = new WebSocket("ws://localhost:5000/sockconn?id=kefu")
            this.ws.onopen=()=>{
                this.ws.send(JSON.stringify({"send":"conn","mes":"conn"}))
            }
            this.ws.onmessage=(res)=>{
                var data = JSON.parse(res.data)
                this.meslist.push(data.meslist)
                this.userlist = data.userlist
            }
        },
        submit(){
            if (this.user !=""){
                 var mm = "客服说:"+this.mes
                 this.ws.send(JSON.stringify({"send":this.user,"mes":mm}))
            }else{
                alert("请选择要聊天的用户")
            }
        }
    },
    mounted() {
        this.conn()
    },
}
</script>

<style>

</style>